<template>
  <zm-body class="panel-container">
    <div class="panel-container-col1">
      <zm-box4 title="部门评价">
        <div class="filter-header">
          <el-form :inline="true" size="mini" :model="filterForm">
            <el-form-item label="考核周期">
              <el-date-picker
                v-model="filterForm.month"
                type="month"
                style="width:110px"
                placeholder="选择月"
              ></el-date-picker>
            </el-form-item>
<!--            <el-form-item label="部门级别">-->
<!--              <el-select v-model="filterForm.type" style="width:110px" placeholder="部门级别">-->
<!--                <el-option-->
<!--                  :label="item.label"-->
<!--                  :value="item.value"-->
<!--                  :key="item.value"-->
<!--                  v-for="(item) in typeOptions"-->
<!--                ></el-option>-->
<!--              </el-select>-->
<!--            </el-form-item>-->
            <el-form-item label="区域">
              <el-select v-model="filterForm.region" style="width:110px" placeholder="南法信镇">
                <el-option
                  :label="item.label"
                  :value="item.value"
                  :key="item.value"
                  v-for="(item) in areaOptions"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="default" @click="onFilterHandler">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="data-table-list">
          <!-- 列表 -->
          <el-table
            size="small"
            fit
            :data="table1data"
            style="width: 100%"
            v-loading="table1dataLoading"
            @row-click="showDepartmentDetail"
          >
            <el-table-column prop="ranking" align="center" label="排名" min-width="8%">
              <template slot-scope="{row,$index}">
                <span v-if="$index<=2">
                  <img width="26" :src="`images/rank-${$index+1}.svg`" alt />
                </span>
                <span v-else class="f14">{{$index+1}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="ranking" label="趋势" min-width="8%">
              <template slot-scope="{row,$index}">
                <i class="iconfont icon-up color-success f12" v-if="row.rankingChange>0"></i>
                <span v-else-if="row.rankingChange==0">---</span>
                <i class="iconfont icon-down color-danger f12" v-else></i>
                <span v-if="row.rankingChange!=0">{{Math.abs(row.rankingChange)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="department" label="部门" min-width="9%"></el-table-column>
            <el-table-column prop="normalDisposalNum" align="center" label="应处置数" min-width="10%"></el-table-column>
            <el-table-column prop="disposalNum" align="center" label="处置数" min-width="10%"></el-table-column>
            <el-table-column prop="overdueDisposalNum" align="center" label="超期处置数" min-width="10%">
              <template slot-scope="{row}">{{row.overdueDisposalNum}}</template>
            </el-table-column>
            <el-table-column prop="disposalRate" align="center" label="处置率" min-width="11%">
              <template slot-scope="{row}">{{row.disposalRate}}%</template>
            </el-table-column>
            <el-table-column prop="reworkNum" align="center" label="返工数" min-width="11%">
              <template slot-scope="{row}">{{row.reworkNum}}</template>
            </el-table-column>
            <el-table-column prop="reworkRate" align="center" label="返工率" min-width="11%">
              <template slot-scope="{row}">{{row.reworkRate}}%</template>
            </el-table-column>
            <el-table-column prop="scores" align="center" label="综合得分" min-width="10%"></el-table-column>
          </el-table>
        </div>
      </zm-box4>
    </div>
    <div class="panel-container-col2">
      <zm-box4 title="处置数排行榜" class="mb20">
        <el-table
          size="small"
          fit
          :data="table2data"
          style="width: 100%"
          v-loading="table2dataLoading"
        >
          <el-table-column prop="ranking" align="center" label="排名" width="50">
            <template slot-scope="{row,$index}">
              <span v-if="$index<=2">
                <img width="22" :src="`images/rank-${$index+1}.svg`" alt />
              </span>
              <span v-else class="f14">{{$index+1}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="department" label="考核部门"></el-table-column>
          <el-table-column prop="disposalNum" align="center" label="处置数" width="100"></el-table-column>
          <el-table-column prop="ranking" label="趋势" width="80">
            <template slot-scope="{row,$index}">
              <i class="iconfont icon-up color-success f12" v-if="row.rankingChange>0"></i>
              <span v-else-if="row.rankingChange==0">---</span>
              <i class="iconfont icon-down color-danger f12" v-else></i>
              <span v-if="row.rankingChange!=0">{{Math.abs(row.rankingChange)}}</span>
            </template>
          </el-table-column>
        </el-table>
      </zm-box4>
      <zm-box4 title="按期处置率排行榜">
        <el-table
          size="small"
          fit
          :data="table3data"
          style="width: 100%"
          v-loading="table3dataLoading"
        >
          <el-table-column prop="ranking" align="center" label="排名" width="50">
            <template slot-scope="{row,$index}">
              <span v-if="$index<=2">
                <img width="22" :src="`images/rank-${$index+1}.svg`" alt />
              </span>
              <span v-else class="f14">{{$index+1}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="department" label="考核部门"></el-table-column>
          <el-table-column prop="disposalRate" align="center" label="按期处置率" width="100">
            <template slot-scope="{row}">{{row.disposalRate}}%</template>
          </el-table-column>
          <el-table-column prop="ranking" label="趋势" width="80">
            <template slot-scope="{row,$index}">
              <i class="iconfont icon-up color-success f12" v-if="row.rankingChange>0"></i>
              <span v-else-if="row.rankingChange==0">---</span>
              <i class="iconfont icon-down color-danger f12" v-else></i>
              <span v-if="row.rankingChange!=0">{{Math.abs(row.rankingChange)}}</span>
            </template>
          </el-table-column>
        </el-table>
      </zm-box4>
    </div>
    <div class="panel-container-col3">
      <zm-box4 title="处置率排行榜" class="mb20">
        <el-table
          size="small"
          fit
          :data="table4data"
          style="width: 100%"
          v-loading="table4dataLoading"
        >
          <el-table-column prop="ranking" align="center" label="排名" width="50">
            <template slot-scope="{row,$index}">
              <span v-if="$index<=2">
                <img width="22" :src="`images/rank-${$index+1}.svg`" alt />
              </span>
              <span v-else class="f14">{{$index+1}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="department" label="考核部门"></el-table-column>
          <el-table-column prop="disposalRate" align="center" label="有效上报率" width="100">
            <template slot-scope="{row}">{{row.disposalRate}}%</template>
          </el-table-column>
          <el-table-column prop="ranking" label="趋势" width="80">
            <template slot-scope="{row,$index}">
              <i class="iconfont icon-up color-success f12" v-if="row.rankingChange>0"></i>
              <span v-else-if="row.rankingChange==0">---</span>
              <i class="iconfont icon-down color-danger f12" v-else></i>
              <span v-if="row.rankingChange!=0">{{Math.abs(row.rankingChange)}}</span>
            </template>
          </el-table-column>
        </el-table>
      </zm-box4>
      <zm-box4 title="返工率排行榜">
        <el-table
          size="small"
          fit
          :data="table5data"
          style="width: 100%"
          v-loading="table5dataLoading"
        >
          <el-table-column prop="ranking" align="center" label="排名" width="50">
            <template slot-scope="{row,$index}">
              <span v-if="$index<=2">
                <img width="22" :src="`images/rank-${$index+1}.svg`" alt />
              </span>
              <span v-else class="f14">{{$index+1}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="department" label="考核部门"></el-table-column>
          <el-table-column prop="reworkRate" align="center" label="返工率" width="100">
            <template slot-scope="{row}">{{row.reworkRate}}%</template>
          </el-table-column>
          <el-table-column prop="ranking" label="趋势" width="80">
            <template slot-scope="{row,$index}">
              <i class="iconfont icon-up color-success f12" v-if="row.rankingChange>0"></i>
              <span v-else-if="row.rankingChange==0">---</span>
              <i class="iconfont icon-down color-danger f12" v-else></i>
              <span v-if="row.rankingChange!=0">{{Math.abs(row.rankingChange)}}</span>
            </template>
          </el-table-column>
        </el-table>
      </zm-box4>
    </div>
    <!-- 某部门考核评价弹窗 -->
    <el-drawer
      title="监督员详情"
      size="60%"
      append-to-body
      :visible.sync="showDepartmentDrawer"
      :with-header="false"
    >
      <a href="javascript:;" @click="showDepartmentDrawer=false" class="el-drawer-colse-bar">
        <i class="iconfont icon-close-line"></i>
      </a>
      <div class="drawer-body p15">
        <zm-box4 :title="activeDepartment.department" class="mb15">
          <!-- 列表 -->
          <el-table
            size="small"
            fit
            :data="table6data"
            style="width: 100%"
            v-loading="table6dataLoading"
            @row-click="showDepartmentDetail"
          >
            <el-table-column prop="period" align="center" label="考核周期" min-width="8%"></el-table-column>
            <el-table-column prop="ranking" label="趋势" min-width="8%">
              <template slot-scope="{row,$index}">
                <i class="iconfont icon-up color-success f12" v-if="row.rankingChange>0"></i>
                <span v-else-if="row.rankingChange==0">---</span>
                <i class="iconfont icon-down color-danger f12" v-else></i>
                <span v-if="row.rankingChange!=0">{{Math.abs(row.rankingChange)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="department" label="部门" min-width="9%"></el-table-column>
            <el-table-column prop="normalDisposalNum" align="center" label="应处置数" min-width="10%"></el-table-column>
            <el-table-column prop="disposalNum" align="center" label="处置数" min-width="10%"></el-table-column>
            <el-table-column prop="overdueDisposalNum" align="center" label="超期处置数" min-width="10%">
              <template slot-scope="{row}">{{row.overdueDisposalNum}}</template>
            </el-table-column>
            <el-table-column prop="disposalRate" align="center" label="处置率" min-width="11%">
              <template slot-scope="{row}">{{row.disposalRate}}%</template>
            </el-table-column>
            <el-table-column prop="reworkNum" align="center" label="返工数" min-width="11%">
              <template slot-scope="{row}">{{row.reworkNum}}</template>
            </el-table-column>
            <el-table-column prop="reworkRate" align="center" label="返工率" min-width="11%">
              <template slot-scope="{row}">{{row.reworkRate}}%</template>
            </el-table-column>
            <el-table-column prop="scores" align="center" label="综合得分" min-width="10%"></el-table-column>
          </el-table>
        </zm-box4>
        <zm-box4 title="趋势分析">
          <div class="rightLineChart" ref="rightLineChart"></div>
        </zm-box4>
      </div>
    </el-drawer>
    <!-- end 某部门考核评价弹窗 -->
  </zm-body>
</template>

<script>
/*
   功能模块  综合评价-问题上报评价
   创建人    zgf
   更新时间  2020/04/14
   备注
*/
export default {
  name: "ProblemReportEvaluation",
  data() {
    return {
      showFilterBody: false,
      filterForm: {
        month: "",
        type: "",
        region: ""
      },
      typeOptions: [],
      areaOptions: [],
      table1data: [],
      table1dataLoading: false,
      table2data: [],
      table2dataLoading: false,
      table3data: [],
      table3dataLoading: false,
      table4data: [],
      table4dataLoading: false,
      table5data: [],
      table5dataLoading: false,
      table6data: [],
      table6dataLoading: false,
      showDepartmentDrawer: false,
      activeDepartment: {},
      rightLineChart: null
    };
  },
  created(){
    let yf =  new Date().getFullYear()+"-"+((new Date().getMonth()+1)<10?"0"+(new Date().getMonth()+1):(new Date().getMonth()+1))
    this.getData(yf)
  },
  mounted() {
    // this.getPageData();
    // this.getTable1Data();
    // this.getTable2Data();
    // this.getTable3Data();
    // this.getTable4Data();
    // this.getTabl54Data();
  },
  methods: {
    //页面需要的一些数据字典类数据获取
    getPageData() {
      setTimeout(() => {
        this.typeOptions = [
          { value: 0, label: "全部" },
          { value: 1, label: "街道级" },
          { value: 2, label: "社区级" }
        ];
        this.areaOptions = [
          { value: 0, label: "全部" },
          { value: 1, label: "仁和镇" },
          { value: 2, label: "某某镇1" },
          { value: 3, label: "某某镇2" },
          { value: 4, label: "某某镇3" }
        ];
      });
    },
    //点击table1的行
    showDepartmentDetail(row, column, event) {
      this.searchData(row.department)
      this.activeDepartment = row;

      this.showDepartmentDrawer = true;
    },
    //获取表格数据  部门评价
    getTable1Data() {
      this.table1dataLoading = true;
      setTimeout(() => {
        this.table1dataLoading = false;
        this.table1data = [
          {
            id: "000001",
            department: "检查组", //部门
            normalDisposalNum: 564, //应处置数
            disposalNum: 235, //处置数
            overdueDisposalNum: 88, //超期处置数
            disposalRate: 0.95, //处置率
            reworkNum: 96, //返工数
            reworkRate: 0.88, //返工率
            scores: 88, //综合得分
            rankingChange: -12
          },
          {
            id: "0000012",
            department: "项目组", //部门
            normalDisposalNum: 564, //应处置数
            disposalNum: 235, //处置数
            overdueDisposalNum: 88, //超期处置数
            disposalRate: 0.95, //处置率
            reworkNum: 96, //返工数
            reworkRate: 0.88, //返工率
            scores: 88, //综合得分
            rankingChange: -12
          },
          {
            id: "000003",
            department: "监理组", //部门
            normalDisposalNum: 564, //应处置数
            disposalNum: 235, //处置数
            overdueDisposalNum: 88, //超期处置数
            disposalRate: 0.95, //处置率
            reworkNum: 96, //返工数
            reworkRate: 0.88, //返工率
            scores: 88, //综合得分
            rankingChange: +8
          },
          {
            id: "000004",
            department: "行政组", //部门
            normalDisposalNum: 564, //应处置数
            disposalNum: 235, //处置数
            overdueDisposalNum: 88, //超期处置数
            disposalRate: 0.95, //处置率
            reworkNum: 96, //返工数
            reworkRate: 0.88, //返工率
            scores: 88, //综合得分
            rankingChange: +7
          },
          {
            id: "000005",
            department: "销售一组", //部门
            normalDisposalNum: 564, //应处置数
            disposalNum: 235, //处置数
            overdueDisposalNum: 88, //超期处置数
            disposalRate: 0.95, //处置率
            reworkNum: 96, //返工数
            reworkRate: 0.88, //返工率
            scores: 88, //综合得分
            rankingChange: -12
          },
          {
            id: "0000012",
            department: "项目组", //部门
            normalDisposalNum: 564, //应处置数
            disposalNum: 235, //处置数
            overdueDisposalNum: 88, //超期处置数
            disposalRate: 0.95, //处置率
            reworkNum: 96, //返工数
            reworkRate: 0.88, //返工率
            scores: 88, //综合得分
            rankingChange: -12
          },
          {
            id: "000003",
            department: "监理组", //部门
            normalDisposalNum: 564, //应处置数
            disposalNum: 235, //处置数
            overdueDisposalNum: 88, //超期处置数
            disposalRate: 0.95, //处置率
            reworkNum: 96, //返工数
            reworkRate: 0.88, //返工率
            scores: 88, //综合得分
            rankingChange: +8
          },
          {
            id: "000004",
            department: "行政组", //部门
            normalDisposalNum: 564, //应处置数
            disposalNum: 235, //处置数
            overdueDisposalNum: 88, //超期处置数
            disposalRate: 0.95, //处置率
            reworkNum: 96, //返工数
            reworkRate: 0.88, //返工率
            scores: 88, //综合得分
            rankingChange: +7
          },
          {
            id: "000005",
            department: "销售一组", //部门
            normalDisposalNum: 564, //应处置数
            disposalNum: 235, //处置数
            overdueDisposalNum: 88, //超期处置数
            disposalRate: 0.95, //处置率
            reworkNum: 96, //返工数
            reworkRate: 0.88, //返工率
            scores: 88, //综合得分
            rankingChange: -12
          },
          {
            id: "0000012",
            department: "项目组", //部门
            normalDisposalNum: 564, //应处置数
            disposalNum: 235, //处置数
            overdueDisposalNum: 88, //超期处置数
            disposalRate: 0.95, //处置率
            reworkNum: 96, //返工数
            reworkRate: 0.88, //返工率
            scores: 88, //综合得分
            rankingChange: -12
          },
          {
            id: "000003",
            department: "监理组", //部门
            normalDisposalNum: 564, //应处置数
            disposalNum: 235, //处置数
            overdueDisposalNum: 88, //超期处置数
            disposalRate: 0.95, //处置率
            reworkNum: 96, //返工数
            reworkRate: 0.88, //返工率
            scores: 88, //综合得分
            rankingChange: +8
          },
          {
            id: "000004",
            department: "行政组", //部门
            normalDisposalNum: 564, //应处置数
            disposalNum: 235, //处置数
            overdueDisposalNum: 88, //超期处置数
            disposalRate: 0.95, //处置率
            reworkNum: 96, //返工数
            reworkRate: 0.88, //返工率
            scores: 88, //综合得分
            rankingChange: +7
          },
          {
            id: "000005",
            department: "销售一组", //部门
            normalDisposalNum: 564, //应处置数
            disposalNum: 235, //处置数
            overdueDisposalNum: 88, //超期处置数
            disposalRate: 0.95, //处置率
            reworkNum: 96, //返工数
            reworkRate: 0.88, //返工率
            scores: 88, //综合得分
            rankingChange: -12
          }
        ];
      }, 1000);
    },
    //table2数据获取 处置数排行榜
    getTable2Data() {
      this.table2dataLoading = true;
      setTimeout(() => {
        this.table2dataLoading = false;
        this.table2data = [
          {
            id: "000001",
            department: "销售1部",
            disposalNum: 564,
            rankingChange: -12
          },
          {
            id: "000001",
            department: "销售2部",
            disposalNum: 564,
            rankingChange: -12
          },
          {
            id: "000001",
            department: "销售3部",
            disposalNum: 564,
            rankingChange: -12
          },
          {
            id: "000001",
            department: "销售4部",
            disposalNum: 564,
            rankingChange: -12
          },
          {
            id: "000001",
            department: "销售5部",
            disposalNum: 564,
            rankingChange: -12
          },
          {
            id: "000001",
            department: "销售6部",
            disposalNum: 564,
            rankingChange: -12
          }
        ];
      }, 1000);
    },
    //table3数据获取 按期处置率排行榜
    getTable3Data() {
      this.table3dataLoading = true;
      setTimeout(() => {
        this.table3dataLoading = false;
        this.table3data = [
          {
            id: "000001",
            department: "销售2部",
            disposalRate: 0.95,
            rankingChange: -12
          },
          {
            id: "000002",
            department: "销售3部",
            disposalRate: 0.95,
            rankingChange: 6
          },
          {
            id: "000003",
            department: "销售5部",
            disposalRate: 0.95,
            rankingChange: 7
          },
          {
            id: "000004",
            department: "销售4部",
            disposalRate: 0.95,
            rankingChange: -12
          },
          {
            id: "000005",
            department: "销售7部",
            disposalRate: 0.95,
            rankingChange: -12
          }
        ];
      }, 1000);
    },
    //table4数据获取  处置率排行榜
    getTable4Data() {
      this.table4dataLoading = true;
      setTimeout(() => {
        this.table4dataLoading = false;
        this.table4data = [
          {
            id: "000001",
            department: "销售2部",
            disposalRate: 0.95,
            rankingChange: -12
          },
          {
            id: "000001",
            department: "销售3部",
            disposalRate: 0.95,
            rankingChange: +4
          },
          {
            id: "000001",
            department: "销售4部",
            disposalRate: 0.95,
            rankingChange: +15
          },
          {
            id: "000001",
            department: "销售5部",
            disposalRate: 0.95,
            rankingChange: -12
          }
        ];
      }, 1000);
    },
    //table5数据获取  返工率排行榜
    getTabl54Data() {
      this.table5dataLoading = true;
      setTimeout(() => {
        this.table5dataLoading = false;
        this.table5data = [
          {
            id: "000001",
            department: "销售一部",
            reworkRate: 0.95,
            rankingChange: -12
          },
          {
            id: "000002",
            department: "销售2部",
            reworkRate: 0.95,
            rankingChange: +9
          },
          {
            id: "000003",
            department: "销售3部",
            reworkRate: 0.95,
            rankingChange: -12
          },
          {
            id: "000004",
            department: "销售4部",
            reworkRate: 0.95,
            rankingChange: +56
          },
          {
            id: "000004",
            department: "销售5部",
            reworkRate: 0.95,
            rankingChange: -12
          }
        ];
      }, 1000);
    },
    //获取表格6数据  某部门的考核评价详细
    getTable6Data() {
      console.log(this.activeDepartment);
      this.table6dataLoading = true;
      setTimeout(() => {
        this.table6dataLoading = false;
        this.table6data = [
          {
            id: "000001",
            period: "2020/05", //考核周期
            department: "检查组", //部门
            normalDisposalNum: 564, //应处置数
            disposalNum: 235, //处置数
            overdueDisposalNum: 88, //超期处置数
            disposalRate: 0.95, //处置率
            reworkNum: 96, //返工数
            reworkRate: 0.88, //返工率
            scores: 88, //综合得分
            rankingChange: -12
          },
          {
            id: "0000012",
            period: "2020/04", //考核周期
            department: "项目组", //部门
            normalDisposalNum: 564, //应处置数
            disposalNum: 235, //处置数
            overdueDisposalNum: 88, //超期处置数
            disposalRate: 0.95, //处置率
            reworkNum: 96, //返工数
            reworkRate: 0.88, //返工率
            scores: 88, //综合得分
            rankingChange: -12
          },
          {
            id: "000003",
            period: "2020/03", //考核周期
            department: "监理组", //部门
            normalDisposalNum: 564, //应处置数
            disposalNum: 235, //处置数
            overdueDisposalNum: 88, //超期处置数
            disposalRate: 0.95, //处置率
            reworkNum: 96, //返工数
            reworkRate: 0.88, //返工率
            scores: 88, //综合得分
            rankingChange: +8
          },
          {
            id: "000004",
            period: "2020/02", //考核周期
            department: "行政组", //部门
            normalDisposalNum: 564, //应处置数
            disposalNum: 235, //处置数
            overdueDisposalNum: 88, //超期处置数
            disposalRate: 0.95, //处置率
            reworkNum: 96, //返工数
            reworkRate: 0.88, //返工率
            scores: 88, //综合得分
            rankingChange: +7
          },
          {
            id: "0000012",
            period: "2020/01", //考核周期
            department: "项目组", //部门
            normalDisposalNum: 564, //应处置数
            disposalNum: 235, //处置数
            overdueDisposalNum: 88, //超期处置数
            disposalRate: 0.95, //处置率
            reworkNum: 96, //返工数
            reworkRate: 0.88, //返工率
            scores: 88, //综合得分
            rankingChange: -12
          },
          {
            id: "000003",
            period: "2019/12", //考核周期
            department: "监理组", //部门
            normalDisposalNum: 564, //应处置数
            disposalNum: 235, //处置数
            overdueDisposalNum: 88, //超期处置数
            disposalRate: 0.95, //处置率
            reworkNum: 96, //返工数
            reworkRate: 0.88, //返工率
            scores: 88, //综合得分
            rankingChange: +8
          },
          {
            id: "000004",
            period: "2019/11", //考核周期
            department: "行政组", //部门
            normalDisposalNum: 564, //应处置数
            disposalNum: 235, //处置数
            overdueDisposalNum: 88, //超期处置数
            disposalRate: 0.95, //处置率
            reworkNum: 96, //返工数
            reworkRate: 0.88, //返工率
            scores: 88, //综合得分
            rankingChange: +7
          },
          {
            id: "000005",
            period: "2019/10", //考核周期
            department: "销售一组", //部门
            normalDisposalNum: 564, //应处置数
            disposalNum: 235, //处置数
            overdueDisposalNum: 88, //超期处置数
            disposalRate: 0.95, //处置率
            reworkNum: 96, //返工数
            reworkRate: 0.88, //返工率
            scores: 88, //综合得分
            rankingChange: -12
          },
          {
            id: "0000012",
            period: "2019/09", //考核周期
            department: "项目组", //部门
            normalDisposalNum: 564, //应处置数
            disposalNum: 235, //处置数
            overdueDisposalNum: 88, //超期处置数
            disposalRate: 0.95, //处置率
            reworkNum: 96, //返工数
            reworkRate: 0.88, //返工率
            scores: 88, //综合得分
            rankingChange: -12
          },
          {
            id: "000003",
            period: "2019/08", //考核周期
            department: "监理组", //部门
            normalDisposalNum: 564, //应处置数
            disposalNum: 235, //处置数
            overdueDisposalNum: 88, //超期处置数
            disposalRate: 0.95, //处置率
            reworkNum: 96, //返工数
            reworkRate: 0.88, //返工率
            scores: 88, //综合得分
            rankingChange: +8
          },
          {
            id: "000004",
            period: "2019/07", //考核周期
            department: "行政组", //部门
            normalDisposalNum: 564, //应处置数
            disposalNum: 235, //处置数
            overdueDisposalNum: 88, //超期处置数
            disposalRate: 0.95, //处置率
            reworkNum: 96, //返工数
            reworkRate: 0.88, //返工率
            scores: 88, //综合得分
            rankingChange: +7
          },
          {
            id: "000005",
            period: "2019/06", //考核周期
            department: "销售一组", //部门
            normalDisposalNum: 564, //应处置数
            disposalNum: 235, //处置数
            overdueDisposalNum: 88, //超期处置数
            disposalRate: 0.95, //处置率
            reworkNum: 96, //返工数
            reworkRate: 0.88, //返工率
            scores: 88, //综合得分
            rankingChange: -12
          }
        ];
      }, 1000);
    },
    //获取某部门趋势分析折线图数据
    getRightLineChartData() {
      console.log(this.activeDepartment);
      setTimeout(() => {
        //[80, 35, 75, 90, 30],
        //[90, 65, 90, 100, 50],
        this.rightLineChartInit(
          [
            {
              legend: "立案数",
              data: [80, 35, 75, 90, 30]
            },
            {
              legend: "处置数",
              data: [90, 65, 90, 100, 50]
            },
            {
              legend: "应处置数",
              data: [110, 15, 66, 77, 40]
            },
            {
              legend: "按期处置数",
              data: [100, 15, 25, 86, 60]
            },
            {
              legend: "结案数",
              data: [70, 55, 66, 66, 55]
            }
          ],
          ["2020-05", "2020-04", "2020-03", "2020-02", "2020-01"]
        );
      }, 100);
    },
    //某部门「趋势分析」折线图渲染
    rightLineChartInit(col1Arr, xLabels) {
      this.rightLineChart = this.$echarts.init(this.$refs.rightLineChart);
      let legendArr = [];
      let seriesArr = [];
      for (var i in col1Arr) {
        let item = col1Arr[i];
        legendArr.push(item.legend);
        seriesArr.push({
          name: item.legend,
          type: "line",
          smooth: true,
          data: item.data,
        });
      }
      this.rightLineChart.setOption({
        tooltip: {
          trigger: "axis"
        },
        legend: {
          textStyle: {
            color: "#02A0FF",
            fontSize: 12
          },
          itemWidth: 16, // 图例图形宽度
          itemHeight: 13,
          itemGap: 30,
          data: legendArr
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "5%",
          top: "20%",
          containLabel: true
        },

        xAxis: {
          type: "category",
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#381F8C"]
            }
          },
          axisLabel: {
            show: true,
            fontSize: 12,
            textStyle: {
              color: "#01AAFF"
            }
          },
          data: xLabels
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: true,
            lineStyle: {
              color: ["#381F8C"]
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: ["#381F8C"]
            }
          },
          axisLabel: {
            show: true,
            fontSize: 12,
            textStyle: {
              color: "#01AAFF"
            }
          }
        },
        series: seriesArr
      });
    },
    onFilterHandler() {
      if(this.filterForm.month == ""){
        this.$alert('请选择月份', this.getTitle.title, {
          confirmButtonText: '确定'
        });
        return false
      }
      let d = this.filterForm.month
      let yf = d.getFullYear()+"-"+((d.getMonth()+1)<10?"0"+(d.getMonth()+1):(d.getMonth()+1))
      this.getData(yf);
    },
    //获取数据
    getData(yf){
      this.table1dataLoading = true;
      this.table2dataLoading = true;
      this.table3dataLoading = true;
      this.table4dataLoading = true;
      this.table5dataLoading = true;
      this.table1data = []
      this.table2data = []
      this.table3data = []
      this.table4data = []
      this.table5data = []
      this.$http.get(this.baseUrl.wtsbpj , {
        params: {
          yf: yf
        }
      }).then((rel)=>{
        let zhdf = rel.data.ZHDF//部门评价
        let czs = rel.data.CZS//处置数
        let czl = rel.data.CZL//处置率
        let aqczl = rel.data.AQCZL//按期处置率
        let fgl = rel.data.FGL//返工率
        //部门评价
        for (let i = 0; i < zhdf.length; i++) {
          this.table1data.push({
            id: i+1,
            department: zhdf[i].UNITNAME, //部门
            normalDisposalNum: zhdf[i].YCZS, //应处置数
            disposalNum: zhdf[i].CZS, //处置数
            overdueDisposalNum: zhdf[i].CQCZS, //超期处置数
            disposalRate: zhdf[i].CZL, //处置率
            reworkNum: zhdf[i].FGS, //返工数
            reworkRate: zhdf[i].FGL, //返工率
            scores: zhdf[i].ZHDF, //综合得分
            rankingChange: zhdf[i].PMQS
          })
        }
        //处置数排行榜
        for (let i = 0; i < czs.length; i++) {
          this.table2data.push({
            id: i+1,
            department: czs[i].UNITNAME,
            disposalNum: czs[i].CZS,
            rankingChange: czs[i].PMQS
          })
        }
        //按期处置率排行榜
        for (let i = 0; i < aqczl.length; i++) {
          this.table3data.push(
                  {
                    id: i+1,
                    department: aqczl[i].UNITNAME,
                    disposalRate: aqczl[i].CZL, //处置率
                    rankingChange: aqczl[i].PMQS
                  })
        }
        //处置率排行榜
        for (let i = 0; i <czl.length; i++) {
          this.table4data.push(
                  {
                    id: i+1,
                    department: czl[i].UNITNAME,
                    disposalRate: czl[i].CZL,
                    rankingChange: czl[i].PMQS
                  })
        }
        //返工率排行榜
        for (let i = 0; i <fgl.length; i++) {
          this.table5data.push(
                  {
                    id: i+1,
                    department: fgl[i].UNITNAME,
                    reworkRate: fgl[i].FGL,
                    rankingChange: fgl[i].PMQS
                  })
        }
        this.table1dataLoading = false;
        this.table2dataLoading = false;
        this.table3dataLoading = false;
        this.table4dataLoading = false;
        this.table5dataLoading = false;
      }).catch((e)=>{
        console.log(e)
        this.table1dataLoading = false;
        this.table2dataLoading = false;
        this.table3dataLoading = false;
        this.table4dataLoading = false;
        this.table5dataLoading = false;
      })
    },
    searchData(name){
      this.table6dataLoading = true;
      this.table6data = []
      this.$http.get(this.baseUrl.wtsbpjxx, {
        params: {
          name: name
        }
      }).then((rel)=>{
        let allData = rel.data
        let colArr = [],xLabels=[],yczArr=[],czArr=[]
        for (let i = 0; i < allData.length; i++) {
          this.table6data.push(
                  {
                    id: i+1,
                    period: allData[i].YF, //考核周期
                    department: allData[i].UNITNAME, //部门
                    normalDisposalNum: allData[i].YCZS, //应处置数
                    disposalNum: allData[i].CZS, //处置数
                    overdueDisposalNum: allData[i].CQCZS, //超期处置数
                    disposalRate: allData[i].CZL, //处置率
                    reworkNum: allData[i].FGS, //返工数
                    reworkRate: allData[i].FGL, //返工率
                    scores: allData[i].ZHDF, //综合得分
                    rankingChange: allData[i].PM
                  })
          xLabels.push(allData[i].YF)
          yczArr.push(allData[i].YCZS)
          czArr.push(allData[i].CZS)
        }
        colArr.push(
                {
                  legend: "应处置数",
                  data: yczArr
                },
                {
                  legend: "处置数",
                  data: czArr
                }
        )
        // this.getTable6Data();
        this.rightLineChartInit(colArr, xLabels);
        // this.getRightLineChartData();
        this.table6dataLoading = false;
      }).catch((e)=>{
        console.log(e)
        this.table6dataLoading = false;
      })
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../css/mixin.less";
.filter-header {
  height: 56px;
  display: flex;
  padding: 0 15px;
  align-items: center;
  .el-form-item--mini.el-form-item,
  .el-form-item--small.el-form-item {
    margin-bottom: 0;
  }
}
.rightLineChart {
  height: calc(50vh - 3.5rem);
}
</style>
